import React, { Component, PureComponent } from 'react';
import { NavBar, IndexBar, List } from 'antd-mobile'
import * as service from "../../api/index"

class City extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            citylist: []
        }
    }
    async componentDidMount() {
        var res = await service.sortCity_json()
        
        this.setState({ citylist: res.data })
    }
    tiao(name) {
        this.props.history.push({ pathname: '/index/shouye', state: { name } });//跳路由传参
    }
    back() {
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className='city'>
                <NavBar onBack={() => { this.back() }}>城市选择</NavBar>
                <IndexBar>
                    {this.state.citylist.map((item, index) => {

                        return (
                            <IndexBar.Panel
                                index={item.letter}
                                title={item.letter}
                                key={index}
                            >
                                <List>
                                    {item.data.map((item, index) => (
                                        <List.Item onClick={() => { this.tiao(item.name) }} key={index}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        );
    }
}

export default City;